<template>
  <div v-if="settable" class="fa-date-sign-setting">
    <ElFormItem prop="sign.dateFormat" label="格式">
      <ElSelect
        v-model="data.sign.dateFormat"
        popper-class="fa-contract-scope"
        :disabled="disabled"
        @change="$emit('change', 'dateFormat')"
      >
        <ElOption v-for="{ label, value } in DateFormatList" :key="value" :value="value" :label="label" />
      </ElSelect>
    </ElFormItem>

    <ElFormItem prop="sign.fontSize" label="字号">
      <ElSelect
        v-model.trim="data.sign.fontSize"
        popper-class="fa-contract-scope"
        :disabled="disabled"
        @change="$emit('change', 'fontSize')"
      >
        <ElOption v-for="size in fontSizes" :key="size" :value="size" :label="`${size}px`" />
      </ElSelect>
    </ElFormItem>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
import { Widget } from '@/models'
import { Viewer, DateFormatList } from '@/types'
import isDateSignSettable from './isDateSignSettable'

export default defineComponent({
  name: 'FaDateSignSetting',

  props: {
    /** 文档查看组件 */
    viewer: Object as PropType<Viewer>,

    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    },

    /** 是否禁用 */
    disabled: {
      type: Boolean,
      default: false
    }
  },

  setup(props) {
    return {
      /** 日期章是否可设置 */
      settable: computed(() => isDateSignSettable(props.viewer?.signOptions || {}, props.data)),

      /** 日期格式 */
      DateFormatList,

      /** 字号 */
      fontSizes: [12, 14, 16, 18, 20, 21]
    }
  }
})
</script>
